
import { debounce } from "@/utils/index";
 
export default {
  mounted(el, binding) {
    // 不插入body时，以下方式可获取元素
    // 插入body时，需要以document.querySelector('.el-scrollbar__wrap')获取
    let scrollWrap = el.querySelector('.el-scrollbar__wrap')
    // let scrollWrap = document.querySelector('.el-scrollbar__wrap')
    // 把监听的方法防抖一下
    const handle = debounce((e) => {
      let scrollDistance = scrollWrap.scrollHeight - scrollWrap.scrollTop
      // 比如此处预留10个像素的位置用于触底
      // console.log(scrollWrap.clientHeight, scrollDistance);
      if (scrollWrap.clientHeight + 120 > scrollDistance) {
        
        binding.value() // 触底通知一下，外界
      }
    }, 170)
    // 绑定监听滚动事件
    scrollWrap?.addEventListener('scroll', handle)
    // 方法挂载到元素身上便于解绑时使用
    el._hanlde = handle
 
  },
  unmounted(el, binding) {
    let scrollWrap = document.querySelector('.el-scrollbar__wrap')
    scrollWrap?.removeEventListener('scroll', el._hanlde)
    el._hanlde = null
 
  }
}